﻿<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="订单列表"></u-navbar>
        <view class="wrap">
            <view class="u-padding-0">
                <u-subsection :list="tabs" :current="current" :animation="true" @change="onClickItem" active-color="#ff9900" mode="button"></u-subsection>
            </view>

            <view class="page-box" v-if="listData.length > 0">
                <view class="order" v-for="(order, orderIndex) in listData" :key="orderIndex">
                    <view class="top" @click="goOrderDetail(order.orderId)">
                        <view class="left">
                            <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
                            <view class="store">订单号 : {{order.orderId}}</view>
                            <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                        </view>
                        <view class="right">{{ order.orderStatusName }}</view>
                    </view>
                    <view class="item" v-for="(goods, indexGoods) in order.items" :key="indexGoods">
                        <view class="left"><image :src="goods.imageUrl && goods.imageUrl!='null' ?  goods.imageUrl : '/static/images/common/empty-banner.png'" mode="aspectFill"></image></view>
                        <view class="content">
                            <view class="title u-line-2">{{goods.name}}</view>
                            <view class="type">{{goods.addon}}</view>
                            <view class="delivery-time">下单时间：{{ $u.timeFormat(goods.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
                        </view>
                        <view class="right">
                            <view class="price">
                                ￥{{ goods.price }}
                            </view>
                            <view class="number">x{{ goods.nums }}</view>
                        </view>
                    </view>
                    <view class="total">
                        共{{ order.items.length }}件商品 合计:
                        <text class="total-price">
                            ￥{{ order.orderAmount }}
                        </text>
                    </view>
                    <view class="bottom">
                        <view class="more">
                            <u-tag :text="order.typeText" mode="light" />
                        </view>

                        <view>
                            <view class='logistics coreshop-btn' hover-class="btn-hover" @click="goOrderDetail(order.orderId)">查看详情</view>
                            <view class='coreshop-btn exchange' hover-class="btn-hover" v-if="order.status === 1 && order.payStatus === 1" @click="goToPay(order.orderId)">立即支付</view>
                            <view class='coreshop-btn exchange' hover-class="btn-hover" v-if="order.status === 1 && order.payStatus >= 2 && order.shipStatus >= 3 && order.confirmStatus === 1" @click="tackDelivery(current,orderIndex)">确认收货</view>
                            <view class='evaluate coreshop-btn' hover-class="btn-hover" v-if="order.status === 1 && order.payStatus >= 2 && order.shipStatus >= 3 && order.confirmStatus >= 2 && order.isComment === false" @click="toEvaluate(order.orderId)">立即评价</view>
                        </view>
                    </view>
                </view>
                <u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
            </view>


            <!-- 空数据 -->
            <view class="page-box" v-else>
                <view>
                    <view class="centre">
                        <u-empty :src="$apiFilesUrl+'/static/images/empty/order.png'" icon-size="300" mode="order" text="您还没有相关类别的订单"></u-empty>
                        <navigator class="coreshop-btn" url="/pages/category/index/index" hover-class="btn-hover" open-type="switchTab">随便逛逛</navigator>
                    </view>
                </view>
            </view>

        </view>
    </view>


</template>
<script>
    import { orders, goods } from '@/common/mixins/mixinsHelper.js'
    export default {
        mixins: [orders, goods],
        data() {
            return {
                tabs: ['全部', '待付款', '待发货', '待收货', '待评价'],
                items: ['未使用', '已使用', '已失效'],
                current: 0,
                page: 1,
                limit: 10,
                listData: [],
                loadStatus: 'loadmore',
                iconType: 'flower',
                loadText: {
                    loadmore: '轻轻上拉',
                    loading: '努力加载中',
                    nomore: '实在没有了'
                },
                status: [0, 1, 2, 3, 4],// 订单状态 0全部 1待付款 2待发货 3待收货 4待评价
            }
        },
        onLoad: function (option) {
            var currentIndex = option.swiperCurrentIndexId;
            if (currentIndex) {
                this.current = currentIndex;
            }
            this.getOrders();
        },
        onReachBottom() {
            if (this.loadStatus === 'loadmore') {
                this.getOrders();
            }
        },
        onShow() {
            // #ifdef MP-ALIPAY || MP-TOUTIAO
            let orderUserShip = this.$db.get('orderUserShip', true);
            if (orderUserShip) {
                this.isReload = orderUserShip;
                this.$db.del('orderUserShip', true);
            }
            let orderUserEvaluate = this.$db.get('orderUserEvaluate', true);
            if (orderUserEvaluate) {
                this.isReload = orderUserEvaluate;
                this.$db.del('orderUserEvaluate', true);
            }
            // #endif
        },
        methods: {
            // tab点击切换
            onClickItem(index) {
                if (this.current !== index) {
                    this.current = index;
                    this.page = 1;
                    this.listData = [];
                    this.getOrders();
                }
            },
            //获取列表
            getOrders() {
                this.loadStatus = 'loading'
                let data = {
                    page: this.page,
                    limit: this.limit,
                    status: this.current
                }
                this.$u.api.orderList(data).then(res => {
                    if (res.status) {
                        res.data.list = this.formatOrderStatus(res.data.list);
                        let newList = this.listData.concat(res.data.list);
                        this.listData = newList;

                        if (res.data.count > this.listData.length) {
                            this.page++
                            this.loadStatus = 'loadmore'
                        } else {
                            this.loadStatus = 'nomore'
                        }
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            removeorder: function (oid) {
                //console.log(oid);
                uni.showModal({
                    title: '确认提醒',
                    content: '您确定要移除订单 [ ' + oid + ' ] 吗？',
                    success: function (e) {
                        if (e.confirm) {
                            //自行完善删除代码
                        }
                    }
                });
            },
            // 确认收货
            tackDelivery(index, orderIndex) {
                let _this = this;
                this.$common.modelShow('提示', '确认执行收货操作吗?', () => {
                    let data = {
                        id: _this.listData[orderIndex].orderId
                    }
                    _this.$u.api.confirmOrder(data).then(res => {
                        if (res.status) {
                            _this.$refs.uToast.show({
                                title: '确认收货成功', type: 'success', callback: function () {
                                    if (this.tab !== 0) {
                                        _this.listData.splice(orderIndex, 1)
                                    } else {
                                        _this.getOrders();
                                    }
                                }
                            })
                        } else {
                            _this.$u.toast(res.msg)
                        }
                    })
                })
            },
            // 订单状态统一在这处理
            formatOrderStatus(orderList) {
                orderList.forEach(item => {
                    switch (item.status) {
                        case 1:
                            if (item.payStatus === 1) {
                                this.$set(item, 'orderStatusName', '待付款')
                            } else if (item.payStatus >= 2 && item.shipStatus === 1) {
                                this.$set(item, 'orderStatusName', '待发货')
                            } else if (item.payStatus >= 2 && item.shipStatus === 2) {
                                this.$set(item, 'orderStatusName', '部分发货')
                            } else if (item.payStatus >= 2 && item.shipStatus >= 3 && item.confirmStatus === 1) {
                                this.$set(item, 'orderStatusName', '已发货')
                            } else if (item.payStatus >= 2 && item.shipStatus >= 3 && item.confirmStatus >= 2 && item.isComment === false) {
                                this.$set(item, 'orderStatusName', '待评价')
                            } else if (item.payStatus >= 2 && item.shipStatus >= 3 && item.confirmStatus >= 2 && item.isComment === true) {
                                this.$set(item, 'orderStatusName', '已评价')
                            }
                            break
                        case 2:
                            this.$set(item, 'orderStatusName', '已完成')
                            break
                        case 3:
                            this.$set(item, 'orderStatusName', '已取消')
                            break
                    }
                });
                for (let i in orderList) {
                    for (let j in orderList[i].items) {
                        orderList[i].items[j].promotionList = JSON.parse(orderList[i].items[j].promotionList);
                    }
                }
                return orderList
            }
        },
    }
</script>


<style lang="scss">
    /* #ifndef H5 */
    page { height: 100%; background-color: #f2f2f2; }
    /* #endif */
    .u-tabs { width: 100%; transition-property: background-color, color; }
    .empty-view { width: 280rpx; height: 280rpx; border-radius: 280rpx; background-color: #F6F7F8; margin-top: 30rpx; }
    .empty-img { width: 220rpx; height: 200rpx; margin: 40rpx; border-radius: 200rpx; }

    .grace-order { background-color: #FFFFFF; padding: 20rpx; margin: 0 25rpx; border-radius: 10rpx; margin-top: 30rpx; width: 660rpx; }
    .grace-shop { line-height: 60rpx; font-size: 28rpx; font-weight: bold; color: #333333; }
    .grace-order-goods { font-size: 0; overflow: hidden; width: 660rpx; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding-bottom: 20rpx; }
    .grace-order-goods-img { width: 100rpx; height: 100rpx; }
    .grace-order-goods-name { line-height: 40rpx; width: 100rpx; flex: auto; overflow: hidden; font-size: 26rpx; margin: 0 20rpx; color: #333333; }
    .grace-order-goods-price { font-size: 30rpx; line-height: 50rpx; color: #333333; padding-left: 10rpx; font-weight: bold; }
    .grace-order-goods-num { font-size: 22rpx; color: #999999; margin-left: 10rpx; }
    .icon-close { font-size: 28rpx; color: #999999; margin-left: 30rpx; }
    .grace-order-footer { margin-top: 2px; }
    .grace-order-number { line-height: 50rpx; color: #999999; font-size: 26rpx; width: 100rpx; flex: auto; }
    .grace-order-status { line-height: 50rpx; color: #999999; font-size: 26rpx; width: 100rpx; flex: auto; text-align: center; }
    .grace-order-btn { display: block; width: 150rpx; height: 50rpx; line-height: 50rpx; color: #999999; font-size: 22rpx; text-align: center; border-radius: 60rpx; border: 1px solid #999999; margin-left: 20rpx; }
    .grace-order-btn-red { border-color: #FF0036; color: #FF0036; }

    .centre { text-align: center; margin: 200rpx auto; font-size: 32rpx; }
        .centre image { width: 164rpx; height: 164rpx; border-radius: 50%; margin-bottom: 20rpx; }
        .centre .tips { font-size: 24rpx; color: #999999; margin-top: 20rpx; }
        .centre .coreshop-btn { margin: 80rpx auto; width: 200rpx; border-radius: 32rpx; line-height: 64rpx; color: #ffffff; font-size: 26rpx; background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%); }
    .wrap { display: flex; flex-direction: column; height: calc(100vh - var(--window-top)); width: 100%; }
    .swiper-box { flex: 1; }
    .swiper-item { height: 100%; }

    .order .bottom { padding: 0; }
        .order .bottom .coreshop-btn { margin: 0 10rpx; }
</style>
